<template>
    <div class="quartz-job-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form :model="form" label-width="120px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="任务编号：">{{ state.ruleForm.id }}</el-form-item>
                  <el-form-item label="任务名称：">{{ state.ruleForm.name }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="任务分组：">{{ selectDictLabel(groupDict, state.ruleForm.jobGroup) }}</el-form-item>
                  <el-form-item label="创建时间：">{{ state.ruleForm.createDate }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="cron表达式：">{{ state.ruleForm.cronExpression }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="下次执行时间：">{{ parseTime(state.ruleForm.nextValidTime) }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="调用目标方法：">{{ state.ruleForm.invokeTarget }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="任务状态：">
                     <div v-if="state.ruleForm.status == 0">正常</div>
                     <div v-else-if="state.ruleForm.status == 1">暂停</div>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="是否并发：">
                     <div v-if="state.ruleForm.concurrent == 0">允许</div>
                     <div v-else-if="state.ruleForm.concurrent == 1">禁止</div>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="执行策略：">
                     <div v-if="state.ruleForm.misfirePolicy == 0">默认策略</div>
                     <div v-else-if="state.ruleForm.misfirePolicy == 1">立即执行</div>
                     <div v-else-if="state.ruleForm.misfirePolicy == 2">执行一次</div>
                     <div v-else-if="state.ruleForm.misfirePolicy == 3">放弃执行</div>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="closeDialog">关 闭</el-button>
            </div>
         </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="quartzJobDialog">
    import { jobApi } from '/@/api/monitor/quartz/job';
    
    const props = defineProps({
        groupDict: {
            type: Array<any>,
            default: () => [],
        },
    });
    // 定义变量内容
    const state = reactive({
        cronPopover: false,
        ruleForm: {
   
        } as JobType,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '任务详情',
            submitTxt: '',
        },
    });

    // 打开弹窗
    const openDialog = (id:string) => {
        jobApi().getJob(id).then((res:any) => {
            state.ruleForm = res.data;
            state.dialog.isShowDialog = true;
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
